<template>
  <div class="app-menu-contains">
    <a-spin :spinning="loading" style="height: 100%;">
      <div class="application-content h100">
        <div class="application-input-wrapper">
          <el-input
            @input="applicationQueryChange"
            v-model="colectQuery"
            size="small"
            clearable
            class="mb10"
          ></el-input>
        </div>
        <div class="application-nemu-wrapper">
          <div class="application-left-menu theme-less-background-color">
            <span
              class="menu-item"
              :class="applicationIndex === index ? 'active theme-less-font-color' : ''"
              v-for="(item, index) in applicationList"
              @click="changeApplicationMenu(index)"
              :key="'menu-icon' + index"
              >{{ item.menuName }} ({{ item.children.length }})</span
            >
          </div>
          <div class="application-child-box">
            <draggable
              v-show="applicationChild.length"
              style="height: 100%;z-index: 1;"
              v-model="applicationChild"
              v-bind="{
                ...dragOptions,
                targetName: 'appMenu'
              }"
              :disabled="!setting"
              @start="startDraggable"
            >
              <div
                :class="['application-child-item'].join(' ')"
                v-for="(item, index) in applicationChild"
                :key="item.receptionApplyId + 'item' + index"
              >
                <div
                  :class="['right-child-item', setting ? 'draggable-move-clazz' : ''].join(' ')"
                  @click="!setting && goApp(item)"
                >
                  <i
                    :class="
                      [
                        'theme-less-background-color',
                        'icon_iconfont',
                        item.icon && item.icon !== '#' ? icon.icon : 'el-icon-picture-outline'
                      ].join(' ')
                    "
                  ></i>
                  <span class="child-text">{{ item.menuName }}</span>
                </div>
                <div style="width: 10%;text-align: right;">
                  <el-tooltip placement="top" :content="item.applyType == 1 ? '取消收藏' : '收藏'">
                    <a-icon
                      type="heart"
                      style="font-size: 19px;line-height: 30px;"
                      class="theme-less-font-color"
                      :theme="item.applyType == 1 ? 'filled' : 'outlined'"
                      @click="!setting && addToFavorite(item)"
                    />
                  </el-tooltip>
                </div>
              </div>
            </draggable>
            <a-empty v-show="!applicationChild.length" description="暂未查找到应用" />
          </div>
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script>
  import debounce from 'lodash/debounce'
  import { treeselect, appList, collectionUserApply } from '@client/addHome/service'
  export default {
    name: 'UseAppMenu',
    data() {
      return {
        loading: false,
        itemDraggable: false,
        applicationIndex: 0,
        colectQuery: '',
        dragOptions: {
          animation: 200,
          ghostClass: 'ghost',
          group: { name: 'app', pull: 'clone' }
        },
        // 可用应用列表
        applicationList: [],
        applicationChild: [] // 当前显示的可用应用列表
      }
    },
    props: {
      setting: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      startDraggable(e) {
        // 反馈被拖动的应用
        this.$store.dispatch('app/setDraggableObj', this.applicationChild[e['oldIndex']] || {})
      },
      goApp(item) {
        console.log(item)
      },
      // 添加/取消 进我的收藏
      addToFavorite(object) {
        const result = this.$httpHandler(collectionUserApply, {
          applyType: Number(object.applyType) === 1 ? 2 : 1,
          receptionApplyId: object.receptionApplyId
        })
        if (result) {
          this.$set(object, 'applyType', Number(object.applyType) === 1 ? 2 : 1)
        }
      },
      changeApplicationMenu(index) {
        if (index === this.applicationIndex) return
        this.applicationIndex = index
        this.applicationChild = this.applicationList[index]['children'] || []
      },
      // 可用列表查询
      applicationQueryChange(val) {
        let keyword = val.trim()
        // debounce()
      },
      notify() {
        this.$httpResultHandler(treeselect).then(res => {
          this.applicationList = res.data
          this.applicationChild = res.data[0]['children'] || []
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .icon_iconfont {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    margin-right: 5px;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    background-color: #3672fe;
  }
  .app-menu-contains {
    width: 100%;
    height: 100%;
    ::v-deep .ant-spin-container {
      height: 100%;
    }
  }
  .application-content {
    display: flex;
    flex-direction: column;
    .application-input-wrapper {
      padding: 0 15px;
    }
    .application-nemu-wrapper {
      display: flex;
      height: 100%;
      .application-left-menu {
        width: 160px;
        border-top-right-radius: 6px;
        opacity: 0.7;
        padding: 10px 0px;
        user-select: none;
        box-sizing: border-box;
        & > span {
          display: inline-block;
          width: 100%;
          font-size: 16px;
          box-sizing: border-box;
          padding: 0px 10px;
          color: #fff;
          line-height: 40px;
          cursor: pointer;
          &.active {
            background: #fff;
            opacity: 0.8;
          }
        }
      }
      .application-child-box {
        flex: 1;
        width: 100%;

        user-select: none;
        padding: 10px;
        .application-child-item {
          display: inline-block;
          font-size: 14px;
          width: 100%;
          color: #333;
          line-height: 35px;
          display: flex;
          // justify-content: space-between;
          .child-icon::before {
            margin-right: 10px;
            padding: 2px;
            background: #3672fe;
            opacity: 0.7;
            color: #fff;
          }
          .child-text {
            flex: 1;
            width: 100%;
          }
          .child-favorite {
            cursor: pointer;
          }
        }
      }
    }
    & > .el-tabs {
      flex: 1;
      height: 100%;
      ::v-deep & > .el-tabs__header {
        background-color: rgba(32, 58, 137, 0.8);
        text-align: left;
        .el-tabs__nav {
          .el-tabs__active-bar {
            display: none;
          }
          .el-tabs__item {
            color: #fff;
            text-align: left;
            padding: 0 10px;
            width: 160px;
            &.is-active {
              color: #777;
            }
          }
        }
      }

      ::v-deep & > .el-tabs__content {
        height: 100%;
      }
    }
  }
  .right-child-item {
    cursor: pointer;
    width: 90%;
    height: 100%;
    &:active {
      background-color: rgba(255, 255, 255, 0.6);
    }
  }
</style>
